<template>
  <div class="application-me">
    <a-card>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" :loading="loading">
        <template slot="status" slot-scope="record">
          <span v-if="record.status === 'NEW'"><a-badge status="processing" /> {{ record.stateDesc }}</span>
          <span v-if="record.status === 'AGREE'"><a-badge status="success" /> {{ record.stateDesc }}</span>
          <span v-if="record.status === 'DISAGREE'"><a-badge status="error" /> {{ record.stateDesc }}</span>
        </template>
        <template slot="operation" slot-scope="record">
          <a-button v-if="record.status === 'NEW'" type="link" @click="agree(record)">同意</a-button>
          <a-button v-if="record.status === 'NEW'" type="link" @click="disagree(record)">拒绝</a-button>
          <span v-if="record.status !== 'NEW'">无</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
// 常量
import { applicationColumns } from './constants'
// api
import { applyList, updateApply } from '@/api/application'

export default {
  name: 'ApplicationMe',
  props: {
    type: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      dataSource: []
    }
  },
  methods: {
    async init () {
      try {
        this.loading = true
        const content = await applyList({
          type: this.type
        })
        console.log(content)
        this.dataSource = content
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    async agree (record) {
      try {
        this.loading = true
        await updateApply({
          id: record.id,
          status: 'AGREE'
        })
        this.init()
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    async disagree (record) {
      try {
        this.loading = true
        await updateApply({
          id: record.id,
          status: 'DISAGREE'
        })
        this.init()
      } catch (error) {

      } finally {
        this.loading = false
      }
    }
  },
  computed: {
    columns () {
      if (this.type === '0') {
        return applicationColumns.slice(0, -1)
      } else {
        return applicationColumns
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style>

</style>
